<template>
    <view>
        <!-- 导航栏 -->
        <myNavigation ref="navBar"></myNavigation>
        <view class="follower_list">
            <block v-for="(item,index) in followerPageInfo" :key="index">
                <view class="followInfo_item">
                    <view class="item_l" @tap.stop="toUserInfoPage(item.followerInfo.userId)">
                        <view class="profile_photo">
                            <image :src="item.followerInfo.photoUrl" mode="aspectFill" />
                        </view>
                        <view class="user_name">{{item.followerInfo.userName}}</view>
                    </view>
                    <view class="item_r" @tap.stop="follow(item)" v-if='item.followerInfo.userId !== +curUserId'>
                        <view class="follow " :class="{ isFollow: item.isFollow }">
                            {{ item.isFollow ? "已关注" : " 关注" }}
                        </view>
                    </view>
                </view>
            </block>
        </view>

    </view>
</template>

<script setup>
    import { ref, onMounted, inject} from 'vue';
    import "./followerInfo.scss";
    import Taro, { useRouter } from "@tarojs/taro";
    import myNavigation from "../../../components/myNavigation.vue";


    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl



    // 关注用户/粉丝信息
    const followerPageInfo = ref([
        {
            followerInfo: {
                userId: null,
                userName: "",
                photoUrl: "",
            },
            isFollow: false
        },
    ])


    // 导航栏信息
    const navBar = ref(null);
    const navigationHome = () => {
        Taro.switchTab({
            url: '../../../pages/index/index',
        });
    };
    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = `${userName}${getType()}`;
        }
    }



    // 关注作者点击事件
    const follow = (item) => {
        // 取消关注
        if (item.isFollow) {
            Taro.request({
                url: `${baseUrl}/follow/removeFollow?followerId=${curUserId}&followedId=${item.followerInfo.userId}`,
                method: 'DELETE',
            })

        } else {
            // 
            Taro.request({
                url: `${baseUrl}/follow/addFollow?followerId=${curUserId}&followedId=${item.followerInfo.userId}`,
                method: 'POST',
            })
        }
        item.isFollow = !item.isFollow;
    }


    // 跳转到用户信息界面
    const toUserInfoPage = (id) => {
        Taro.navigateTo({
            url: `../userInfo/userInfo?userId=${id}&curUserId=${curUserId}`
        });
    }

    const getFollowerPageInfo = () => {
        Taro.request({
            url: `${baseUrl}/follow/${type}?userId=${userId}&curUserId=${curUserId}`,
            success: (res) => {
                followerPageInfo.value = res.data.data;
                setNavBar();
            }
        });
    }

    // 获取外来搜索值(未完成)
    const router = useRouter();
    // 根据id来查询菜谱信息
    const { userId, curUserId, type, userName } = router.params;
    // const userId = 1
    // const curUserId = 1
    // const type = "follower";
    const getType = function () {
        if (type === "getFollowed") return "的关注";
        else return "的粉丝";
    }



    onMounted(() => {
        getFollowerPageInfo();
        // getUserPageInfo();

    });
</script>

<style lang="scss" scoped></style>